<template>
    <el-tab-pane :key="tab.name" :label="tab.title" :name="tab.name" :lazy="true">
        <!-- 实时更新的图表组件 -->
        <!-- {{ props.isTimerActive }} -->
        <div v-if="tab.name === '1'" class="ChartContainer">
            <div class="topContainer">
                <!-- 传递实时数据和历史数据给 TemperatureChart 组件 -->
                <TemperatureChart :isTimerActive="true" class="TemChart" :realtimeData="realtimeTemperatureData"
                    :historyData="historyTemperatureData" />
                <HumidityChart class="humChart" :realtimeHumData="realtimeHumidityData"
                    :historyHumData="historyHumidityData" />
            </div>
            <div class="bottomContainer">
                <IlluminationChart class="IllumChart" />
                <EnviromentAllChart class="EnvChart" />
            </div>
        </div>
        <!-- 非实时更新的图表组件 -->
        <div v-else class="ChartContainer">
            <div class="topContainer">
                <!-- 传递实时数据和历史数据给 TemperatureChart 组件 -->
                <TemperatureChart class="TemChart" :realtimeData="realtimeTemperatureData"
                    :historyData="historyTemperatureData" />
                <HumidityChart class="humChart" :realtimeHumData="realtimeHumidityData"
                    :historyHumData="historyHumidityData" />
            </div>
            <div class="bottomContainer">
                <IlluminationChart class="IllumChart" />
                <EnviromentAllChart class="EnvChart" />
            </div>
        </div>
    </el-tab-pane>
</template>

<script setup>
import TemperatureChart from './EnvironmentChart/TemperatureChart.vue';
import HumidityChart from './EnvironmentChart/HumidityChart.vue';
import IlluminationChart from './EnvironmentChart/IlluminationChart.vue';
import EnviromentAllChart from './EnvironmentChart/EnviromentAllChart.vue';
import { ref, onMounted, inject, provide } from 'vue';
// import { getNowData } from '@/api/Environment/index.js';
// import { getHistoryData } from '@/api/Environment/index.js';

const props = defineProps({
    tab: {
        type: Object,
        required: true
    },
    isTimerActive: {
        type: Boolean,
        default: true
    },
});
onMounted(async () => {
})


// // 定义响应式变量来存储温度和湿度的实时和历史数据
// const realtimeTemperatureData = ref([]);
// const historyTemperatureData = ref([]);
// const realtimeHumidityData = ref([]);
// const historyHumidityData = ref([]);

// // 获取温度和湿度的实时数据
// onMounted(async () => {
//     const resNow = await getNowData('');
//     if (resNow.code == 201) {
//         console.log('实时温度数据', resNow.data.temp.slice(0, 7));
//         console.log('实时湿度数据', resNow.data.hum.slice(0, 7));
//         realtimeTemperatureData.value = resNow.data.temp.slice(0, 7);
//         realtimeHumidityData.value = resNow.data.hum.slice(0, 7);
//     }
// });

// // 获取温度和湿度的历史数据
// onMounted(async () => {
//     const resHistory = await getHistoryData('草玉露');
//     if (resHistory.code == 201) {
//         console.log('历史温度数据', resHistory.data.temperature);
//         console.log('历史湿度数据', resHistory.data.hum);
//         historyTemperatureData.value = resHistory.data.temperature;
//         historyHumidityData.value = resHistory.data.hum;
//     }
// });
</script>


<style lang="scss">
.ChartContainer {
    width: 100%;
    height: 100%;

    .topContainer {
        height: 50%;
        // border: 1px solid red;
        // background-color: #000;
        display: flex;


        .TemChart,
        .humChart {
            // border: 1px solid orange;
            width: 50%;
            height: 100%;
        }

    }

    .bottomContainer {
        height: 50%;
        // background-color: #000;
        display: flex;

        // border: 1px solid red;

        .IllumChart,
        .EnvChart {
            width: 50%;
            height: 100%;
            // border: 1px solid orange;
        }
    }
}
</style>